<template>
    <div class="cart">
        <van-nav-bar
          title="我的购物车"
          right-text='首页'
          left-arrow
          @click-left="$router.back()"
          @click-right="$router.push('/home')"
        />
        <van-empty class="custom-image" image="https://oss.suning.com/vss/activity/wximg/cart/sn-cart-empty.png" description="购物车还是空的，快来挑选好货吧" v-if="cartList.length<1">
           <van-button round type="danger" class="bottom-button" @click="$router.push('/kind')">去逛逛</van-button>
        </van-empty>
        <div class="cartCont" v-else>
          <transition-group name="fade">
             <van-swipe-cell v-for="(item,index) in cartList" :key="item.proId">
                <van-card
                  :price="item.price"
                  :title="item.proName"
                  class="goods-card"
                >
                  <template #thumb>
                    <van-checkbox v-model="item.flag" shape="round" @input="onSetFlag(index)" checked-color="#ee0a24"/>
                    <van-image
                       fit="contain"
                       :src="item.img"
                    />
                  </template>
                  <template #num>
                    <van-stepper v-model="item.num" disable-input @change="onSetNum(index)" theme="round" button-size="22"/>
                  </template>
                </van-card>
                <template #right>
                   <van-button square text="删除" type="danger" class="delete-button" @click="onDel(index)"/>
                </template>
             </van-swipe-cell>
           </transition-group>
        </div>
        <van-submit-bar :price="allPrice" button-text="结算" @submit="onSubmit" button-color="red">
            <van-checkbox v-model="allChecked" checked-color="#ee0a24">全选</van-checkbox>
            <template #tip>
               当前挑选了<span>{{allNum}}</span>件宝贝
              </template>
        </van-submit-bar>
    </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon, GoodsAction, GoodsActionIcon, GoodsActionButton, SwipeCell, Card, Button, Checkbox, CheckboxGroup, Image as VanImage, Stepper, SubmitBar, Empty, Toast } from 'vant'
import { getCart, delCart, setFlag, setNum, setAllFlag, addOrder } from '@/api/request.js'
import { mapMutations } from 'vuex'
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(GoodsAction)
Vue.use(GoodsActionButton)
Vue.use(GoodsActionIcon)
Vue.use(SwipeCell)
Vue.use(Card)
Vue.use(Button)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(VanImage)
Vue.use(Stepper)
Vue.use(SubmitBar)
Vue.use(Empty)
Vue.use(Toast)

export default {
  data () {
    return {
      cartList: [],
      checked: true,
      value: 1
    }
  },
  mounted () {
    getCart({ userId: sessionStorage.getItem('userId') }).then(data => {
      this.cartList = data.data.msg.proData
      this.change_cartList(this.cartList)
    })
  },
  methods: {
    ...mapMutations({
      change_cartList: 'cart/change_cartList'
    }),
    onSetFlag (i) {
      setFlag({
        userId: sessionStorage.getItem('userId'),
        proId: this.cartList[i].proId,
        flag: this.cartList[i].flag
      }).then(data => {
        this.change_cartList(this.cartList)
        // console.log('修改成功')
      })
    },
    onDel (i) {
      delCart({
        userId: sessionStorage.getItem('userId'),
        proId: this.cartList[i].proId
      }).then(data => {
        this.cartList = data.data.msg.proData
        this.change_cartList(this.cartList)
      })
    },
    onSetNum (i) {
      setNum({
        userId: sessionStorage.getItem('userId'),
        proId: this.cartList[i].proId,
        num: this.cartList[i].num
      }).then(data => {
        this.change_cartList(this.cartList)
      })
    },
    onSubmit () {
      const proData = []
      this.cartList.forEach(val => {
        if (val.flag) {
          proData.push({
            proId: val.proId,
            num: val.num
          })
        }
      })
      if (proData.length > 0) {
        addOrder({
          userId: sessionStorage.getItem('userId'),
          proData: JSON.stringify(proData)
        }).then(data => {
          sessionStorage.setItem('order', 'a')
          this.$router.push('/order')
        })
      } else {
        Toast.fail('请勾选商品')
      }
    }
  },
  computed: {
    allChecked: {
      get () {
        return this.cartList.every(val => val.flag)
      },
      set (v) {
        setAllFlag({
          userId: sessionStorage.getItem('userId'),
          flag: v
        })
        this.cartList.forEach(val => { val.flag = v })
        this.change_cartList(this.cartList)
      }
    },
    allPrice () {
      return this.cartList.reduce((start, val) => {
        if (val.flag) {
          return start + val.num * val.price * 100
        } else {
          return start
        }
      }, 0)
    },
    allNum () {
      return this.$store.getters.flagNum
    }
  }
}
</script>

<style lang="scss" scoped>
.cartCont{
 .goods-card {
    margin: 5px;
    background-color: white;
    .van-card__thumb{
        width:1.1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .van-image{
            width: 0.8rem;
            height: 0.8rem;
        }
        .van-checkbox{
            width: 0.2rem;
            height: 0.2rem;
        }
    }
  }
  .delete-button {
    height: 100%;
  }
}
.cart{
  height: 100%;
  background: #efefef;
  .custom-image .van-empty__image {
      width: 90px;
      height: 90px;
    }
    .van-button--round {
      border-radius:0px;
    }
    .van-submit-bar__bar {
      height: 43px;
      padding:0 8px;
    }
   .van-nav-bar{
  height: 0.45rem;
  border-bottom:solid 1px #efefef;
  .van-nav-bar__text{
        color: #000;
    }
    .van-icon-arrow-left{
           color: #000;
    }
    .van-nav-bar__title{
        font-size: 0.2rem;
        color: #000;
    }
}
}
// / 离开之前的状态
.fade-leave{
  transform: translateX(0);
}
// 正在离开的状态
.fade-leave-active{
  transition: all 0.3s;
}
// 离开结束后的状态
.fade-leave-to{
  transform: translateX(-100vw);
}
</style>
